<!--
 * @Author: Christion.Young
 * @Date: 2020-11-24 16:50:45
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-08 09:11:04
 * @Description: Christion.Young
-->
<template>
  <!-- 结果追溯 -->
  <div class="resultsBack">
    <el-form
      :model="saveForm"
      :rules="rules"
      :label-position="'left'"
      ref="saveForm"
      class="formBox"
      label-width="100px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="场景：" prop="sceneCode">
            <el-select
              v-model="saveForm.sceneCode"
              style="width:calc(100% - 20px)"
              placeholder="请选择"
            >
              <el-option
                v-for="item in sceneCodeOptions"
                :key="item.sceneCode"
                :label="item.sceneName"
                :value="item.sceneCode"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="部门：" prop="dept">
            <div class="treeBoxBig">
              <div class="treeBox">{{deptValue}}</div>
              <div class="treeBtnCS" @click="treeBtn"></div>
            </div>
            <!-- 所有成员、关系树展示-->
            <div v-if="toShowMemberTree">
              <memberAndTree
                ref="memberAndTree"
                :toShowMemberTree="toShowMemberTree"
                :dictCode="dictCode"
                :indexItems="indexItems"
                :itemData="itemData"
                @selectDataFunc="selectDataFunc"
              ></memberAndTree>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="追溯类型：" prop="view">
            <el-select v-model="saveForm.view" style="width:calc(100% - 20px)" placeholder="请选择">
              <el-option
                v-for="item in viewOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button @click="submitForm('saveForm')">追溯</el-button>
            <el-button @click="resetForm('saveForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="bodyBox">
      <el-col :span="isBtnShowTit?24:18" class="leftBox">
        <div class="headlineBox">追溯视图</div>
        <div class="echartsBox">
          <div ref="echarts_01" style="width: 500px;height: 500px;"></div>
          <div style="width: 500px;height: 500px;">
            <div v-show="requestData.pre.length" ref="echarts_02" style="width: 500px;height: 250px;"></div>
            <div v-show="requestData.next.length" ref="echarts_03" style="width: 500px;height: 250px;"></div>
          </div>
        </div>
      </el-col>
      <div class="btnShow" @click="getbtnShowTit">
        <i :class="btnShowTit"></i>
      </div>
      <transition name="el-zoom-in-center">
        <el-col :span="isBtnShowTit ? 0 : 6" v-show="!isBtnShowTit" class="rightBox">
          <div class="headlineBox">规则--详细信息</div>
          <div class="messageBox">
            <div>
              <span>来源：</span>
              <span>{{messageData.s_1}}</span>
            </div>
            <div>
              <span>待分摊成本：</span>
              <span>{{messageData.s_2}}</span>
            </div>
            <div>
              <span>本场景本规则摊出成本：</span>
              <span>{{messageData.s_4}}</span>
            </div>
            <div>
              <span>规则名称：</span>
              <span>{{messageData.d_0}}</span>
            </div>
            <div>
              <span>动因名称：</span>
              <span>{{messageData.d_1}}</span>
            </div>
            <div>
              <span>本规则本动因分摊成本：</span>
              <span>{{messageData.s_5}}</span>
            </div>
            <div>
              <span>分摊比例：</span>
              <span>{{messageData.d_3}}</span>
            </div>
            <div>
              <span>目标：</span>
              <span>{{messageData.o_1}}</span>
            </div>
            <div>
              <span>接受的成本：</span>
              <span>{{messageData.o_2}}</span>
            </div>
            <div>
              <span>待分摊成本：</span>
              <span>{{messageData.o_3}}</span>
            </div>
          </div>
        </el-col>
      </transition>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import { caPubDriver } from "@/api/index";
import { getDict } from "@/api/getDict";
import memberAndTree from "@/components/ca/memberAndTree";
export default {
  components: {
    memberAndTree
  },
  data() {
    return {
      deptValue: "",
      deOrg: "",
      btnShowTit: "el-icon-d-arrow-right",
      isBtnShowTit: false,
      echarts_01: null,
      echarts_02: null,
      echarts_03: null,
      saveForm: {
        sceneCode: "",
        dept: "",
        view: ""
      },
      rules: {
        sceneCode: [
          {
            required: true,
            message: "请输入场景",
            trigger: "blur"
          }
        ],
        dept: [
          {
            required: true,
            message: "请输入部门",
            trigger: "blur"
          }
        ]
      },
      //场景下拉
      sceneCodeOptions: [],
      //追溯类型下拉
      viewOptions: [],
      // 定义图表数据
      requestData: {
        next: [],
        cur: {
          cur_in: 59925925.333334,
          cur_out: 0,
          cur_wait: 1,
          cur_self: 0
        },
        pre: [
          {
            porg: "GRP004",
            rulecode: "20090100009",
            o_3: 61259256.666668,
            o_2: 666665.666667,
            s_3: 1,
            drivercode: "19051400001",
            NUM: 1,
            s_2: 61259256.666668,
            batchcode: "20060500007",
            s_5: 0,
            s_4: 0,
            d_0: "jg",
            dictItemName: "SSS",
            d_1: "机构级测试动因"
          },
          {
            porg: "GRP011",
            rulecode: "20090100009",
            o_3: 1000000,
            o_2: 0,
            s_3: 1,
            drivercode: "19051400001",
            s_2: 61259256.666668,
            batchcode: "20060500007",
            s_5: 0,
            s_4: 0,
            d_0: "jg",
            dictItemName: "gggg",
            d_1: "机构级测试动因"
          },
          {
            porg: "GRP012",
            rulecode: "20090100009",
            o_3: 88888888,
            o_2: 0,
            s_3: 1,
            drivercode: "19051400001",
            s_2: 61259256.666668,
            batchcode: "20060500007",
            s_5: 0,
            s_4: 0,
            d_0: "jg",
            dictItemName: "www",
            d_1: "机构级测试动因"
          }
        ]
      },
      messageData: {
        o_1: "-",
        o_3: "-",
        o_2: "-",
        d_0: "-",
        s_3: "-",
        s_2: "-",
        d_1: "-",
        s_5: "-",
        s_4: "-",
        s_1: "-",
        d_3: "-"
      },
      //选择值组件所需信息
      toShowMemberTree: false,
      dictCode: "OrganUnit",
      indexItems: 0,
      itemData: []
    };
  },
  created() {
    this.getDict("ca_scene_view");
    this.querySceneListFunc();
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    queryReview() {
      this.displayChart_cur(this.requestData.cur);
      this.displayChart_Pre(this.requestData.pre);
      this.displayChart_Next(this.requestData.next);
    },
    displayChart_cur(cur) {
      if (cur.length != 0) {
        var optionCur = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function(params) {
              for (var i = 0; i < params.length; i++) {
                if (params[i].name == "总成本") {
                  // 		        			return "直接成本:"+params[i].data+"\n摊入成本"+params[i].data;
                  return params[i + 1].seriesName;
                } else {
                  // 		        			return "未分摊成本:"+params[i].data+"\n摊出成本"+params[i].data;
                  return params[i].seriesName;
                }
              }
            }
          },
          title: {
            text: "部门" + this.saveForm.dept + "成本信息",
            left: "center"
          },
          grid: {
            left: "3%",
            right: "10%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            name: "金额",
            type: "value",
            splitLine: false
          },
          yAxis: {
            name: "成本",
            type: "category",
            data: ["总成本", "摊出总成本"]
          },
          color: ["#ADD663", "#646AD6", "#21390A"],
          series: [
            {
              name:
                "未分摊成本:" +
                Math.round((cur.cur_in + cur.cur_self - cur.cur_out) * 10000) /
                  10000 +
                "\n摊出成本" +
                cur.cur_out,
              type: "bar",
              stack: "总量",
              label: {
                normal: {
                  show: true,
                  position: "insideRight"
                }
              },
              data: [
                Math.round((cur.cur_in + cur.cur_self - cur.cur_out) * 10000) /
                  10000,
                cur.cur_self
              ]
            },
            {
              name: "直接成本:" + cur.cur_self + "\n摊入成本:" + cur.cur_in,
              type: "bar",
              stack: "总量",
              label: {
                normal: {
                  show: true,
                  position: "insideRight"
                }
              },
              data: [cur.cur_out, cur.cur_in]
            }
          ]
        };

        this.echarts_01 = echarts.init(this.$refs.echarts_01);
        this.echarts_01.setOption(optionCur);
      }
    },
    displayChart_Pre(pre) {
      if (pre.length != 0) {
        var optionPre = {
          title: {
            text: "摊入成本",
            subtext: "",
            x: "center"
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} <br/> {c} ({d}%)"
          },
          legend: {
            show: false,
            orient: "vertical",
            x: "right",
            selected: false,
            data: []
          },
          color: ["#ADD663", "#646AD6", "#21390A"],
          calculable: true,
          series: []
        };
        var valuesPre = [];
        for (var i = 0; i < pre.length; i++) {
          optionPre.legend.data.push(pre[i].dictItemName);
          valuesPre.push({
            value: pre[i].s_2,
            name: pre[i].dictItemName,
            rulecode: pre[i].rulecode,
            drivercode: pre[i].drivercode,
            orgName: pre[i].dictItemName,
            org: pre[i].porg
          });
        }
        optionPre.series.push({
          name: "摊入成本",
          type: "pie",
          radius: "70%",
          center: ["50%", "60%"],
          selectedMode: "single",
          data: valuesPre,
          label: {
            normal: {
              show: false
            }
          }
        });
        this.echarts_02 = echarts.init(this.$refs.echarts_02);
        this.echarts_02.setOption(optionPre);
        this.echarts_02.on("click", param => {
          this.viewRuleInfoPre(
            param.data.rulecode,
            param.data.drivercode,
            param.data.orgName,
            param.data.org
          );
        });
      }
    },
    displayChart_Next(next) {
      if (next.length != 0) {
        var optionNext = {
          title: {
            text: "摊出成本",
            subtext: "",
            x: "center"
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} <br/> {c} ({d}%)"
          },
          legend: {
            show: false,
            orient: "vertical",
            x: "right",
            selected: false,
            data: []
          },
          calculable: true,
          color: ["#ADD663", "#646AD6", "#21390A"],
          series: []
        };
        var valuesNext = [];
        for (var i = 0; i < next.length; i++) {
          optionNext.legend.data.push(next[i].dictItemName);
          valuesNext.push({
            value: next[i].o_2,
            name: next[i].dictItemName,
            rulecode: next[i].rulecode,
            drivercode: next[i].drivercode,
            orgName: next[i].dictItemName,
            org: next[i].ORG
          });
        }
        optionNext.series.push({
          name: "摊出成本",
          type: "pie",
          radius: "70%",
          center: ["50%", "60%"],
          data: valuesNext,
          selectedMode: "single",
          label: {
            normal: {
              show: false
            }
          },
          itemStyle: {
            normal: {}
          }
        });
        this.echarts_03 = echarts.init(this.$refs.echarts_03);
        this.echarts_03.setOption(optionNext);
        this.echarts_03.on("click", param => {
          this.viewRuleInfoNext(
            param.data.rulecode,
            param.data.drivercode,
            param.data.orgName,
            param.data.org
          );
        });
      }
    },
    viewRuleInfoPre(rulecode, drivercode, orgName, org) {
      let data = {
        rulecode: rulecode,
        drivercode: drivercode,
        org: org,
        curOrg: this.saveForm.dept,
        scene: this.saveForm.sceneCode
      };
      caPubDriver.queryReviewDetailPre(data).then(res => {
        if (res.code === 200) {
          console.log(res.datas,"查到的数据");
          this.messageData = res.datas;
          this.messageData.o_1 = orgName; 
          this.messageData.s_1 = this.deptValue;
          if(res.datas.o_2!=null && res.datas.o_2!='0' && res.datas.s_5!=null && res.datas.s_5!='0'){
            this.messageData.d_3 = Math.round((res.datas.o_2/res.datas.s_5)*10000)/10000;
				  }else{
					  this.messageData.d_3 = '0'; 
				  }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    viewRuleInfoNext(rulecode, drivercode, orgName, org) {
      let data = {
        rulecode: rulecode,
        drivercode: drivercode,
        org: org,
        curOrg: this.saveForm.dept,
        scene: this.saveForm.sceneCode
      };
      caPubDriver.queryReviewDetailNext(data).then(res => {
        if (res.code === 200) {
          console.log(res.datas,"查到的数据");
          this.messageData = res.datas;
          this.messageData.o_1 = orgName; 
          this.messageData.s_1 = this.deptValue;
          if(res.datas.o_2!=null && res.datas.o_2!='0' && res.datas.s_5!=null && res.datas.s_5!='0'){
            this.messageData.d_3 = Math.round((res.datas.o_2/res.datas.s_5)*10000)/10000;
            
				  }else{
					  this.messageData.d_3 = '0'; 
				  }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    querySceneListFunc() {
      caPubDriver.queryList().then(res => {
        if (res.code === 200) {
          this.sceneCodeOptions = res.datas;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //字典信息
    getDict(data) {
      getDict(data).then(res => {
        if (res.code == 200) {
          this.viewOptions = res.datas;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //追溯按钮
    submitForm(formName) {
      console.log(this.saveForm, "提交的参数");
      this.$refs[formName].validate(valid => {
        if (valid) {
          caPubDriver.queryReview(this.saveForm).then(res => {
          this.messageData ={
             o_3: "-",
             o_2: "-",
             d_0: "-",
             s_3: "-",
             s_2: "-",
             d_1: "-",
             s_5: "-",
             s_4: "-",
             o_1: "-",
             s_1: "-",
             d_3: "-"
          }
          this.requestData = {}
            if (res.code == 200) {
              this.requestData = res.datas;
              this.deOrg = this.saveForm.dept;
              this.queryReview();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    //重置按钮
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.deptValue = "";
    },
    selectDataFunc(val) {
      this.toShowMemberTree = false;
      if (val) {
        let params = val;
        if (params.selectionFlag == "2") {
          this.deptValue = params.row.dictItemName;
          this.saveForm.dept = params.row.dictItemCode;
        } else {
          this.deptValue = params.row.name;
          this.saveForm.dept = params.row.id;
        }
      }
      // if (val) {
      //     this.deptValue = val.row.dictItemName
      //     this.saveForm.dept = val.row.dictItemCode
      // }
    },
    treeBtn() {
      this.toShowMemberTree = true;
      this.dictCode = "OrganUnit";
      this.$nextTick(() => {
        this.$refs.memberAndTree.init();
      });
    },
    getbtnShowTit() {
      if (this.isBtnShowTit) {
        this.isBtnShowTit = false;
        this.btnShowTit = "el-icon-d-arrow-right";
      } else {
        this.isBtnShowTit = true;
        this.btnShowTit = "el-icon-d-arrow-left";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.resultsBack {
  width: 100%;
  height: 100%;
  .formBox {
    width: 100%;
    height: 10%;
    padding-left: 20px;
    padding-top: 20px;
  }
  .bodyBox {
    width: 100%;
    height: 90%;
    .leftBox {
      .headlineBox {
        font-size: 16px;
        font-weight: 900;
        padding-left: 10px;
        padding: 10px;
        background-color: #fafafa;
      }
      .echartsBox {
        margin-top: 30px;
        display: flex;
      }
    }
    .rightBox {
      .headlineBox {
        font-size: 16px;
        font-weight: 900;
        padding-left: 10px;
        padding: 10px;
        background-color: #fafafa;
      }
      .messageBox {
        div {
          font-size: 12px;
          margin: 20px;
        }
      }
    }
  }
}
.treeBoxBig {
  width: calc(100% - 20px);
  height: 32px;
  border: 1px solid #ababab;
  border-radius: 4px;
  .treeBox {
    width: 200px;
    height: 32px;
    padding-left: 10px;
    line-height: 32px;
  }
  .treeBtnCS {
    background: url("~@/assets/images/popWindow_arrow.gif");
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
    position: absolute;
    right: 21px;
    top: 8px;
    cursor: pointer;
  }
}
.btnShow {
  width: 40px;
  height: 100%;
  position: absolute;
  right: -10px;
  top: 10px;
  font-size: 20px;
}
</style>